<template>
  <lazy-component class="zui-p-10px zui-background-color-white">
    <van-row gutter="10">
      <van-col v-for="(item, index) in value" :key="index" class="main-sort-col">
        <div @click="handleLink(item.sortId)">
          <z-image :src="item.src" width="100%" height="calc((100vw - 60px) / 5)" border-radius="50%"></z-image>
          <div class="main-sort-col__label">{{ item.name }}</div>
        </div>
      </van-col>
    </van-row>
  </lazy-component>
</template>

<script>
/**
 * 首页上的分类，一行 5 个
 * @param { array } value - value的内容数组，[{ src: src, path: path, name: name }, { src: src, path: path, name: name }]
 */
export default {
  name: 'MainSort',
  props: {
    value: Array
  },
  methods: {
    handleLink (sortId) {
      console.log('跳转')
      this.$router.push({
        path: '/classify',
        query: {
          sortId: sortId
        }
      })
    }
  }
}
</script>

<style lang="less">
@import "../../../common/z-theme/_variable.less";
.main-sort-col {
  width: 20%;
  text-align: center;
}
.main-sort-col__label {
  font-size: @--font-size-small;
  color: @--color-text-secondary;
  margin: 5px 0 5px 0
}
</style>
